import { initState } from "./state"
import { complieToRenderFunction } from "./complier";
import { mountComponent } from "./lifecycle"
function initMixin(Vue){
    // 初始化vue实例
    Vue.prototype._init = function(options){
        const vm = this;

        vm.$options = options;

        initState(vm) // 初始化状态（data props computed watch）监听
        // 判断 new vue 传递的参数
        if (vm.$options.el){ 
            vm.$mount(vm.$options.el) // 挂载函数  vue.prottype中的$mount
        }
    }

    // 挂载函数方法
    Vue.prototype.$mount = function(el){
        const vm = this;
        const options = vm.$options;

        el = document.querySelector(el); // 获取到真实dom节点
        vm.$el = el; // 将真实dom节点挂载到vue实例上

        // 判断是否需要渲染
        if (!options.render){
            let template = options.template; // 获取到模板 new Vue 传递的模板
            
            if (!template && el){
                template = el.outerHTML; // 获取到整个el模板html
                
            }
            const render = complieToRenderFunction(template)  // 拿到render函数 生成虚拟DOM
            options.render = render; // 将render函数挂载到options上
        }
        mountComponent(vm); //渲染真实dom节点


    }

}

export {
    initMixin
}